<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<parent1></parent1>
		</div>
		
	    <script type=text/javascript src="../../vue.js"></script>
        <script>
		//应用实例 app
            const app = Vue.createApp({
                data() {
                    return {
                       price: 188 
                    }
        	    },
        	    computed: {
        	  	    totalPrice(){
						//根实例
						console.log("this = ",this);
        	  		    return this.price * 10;
        	  	    }
        	    },
        	    methods: {
        	  	    hello(){
						//根实例
						console.log("this = ",this);
        	  		    return "Hello, Java无难事";
        	  	    }
        	    }
            })
			
			//所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
            
        	app.component('parent1', {
				data() {
				    return {
				       parentdata: 'sdfsdf'
				    }
				},
        		template: '<child></child>'
        	})
			
        	
        	app.component('child', {
				data() {
				    return {
				       childv: 'child'
				    }
				},
        	 	methods: {
        	 		accessRoot(){
						//vue 实例 this
						console.log("this.childv = ",this.childv);
        	 			console.log("单价：" + this.$root.price);
        	 			console.log("总价：" + this.$root.totalPrice);
        	 			console.log(this.$root.hello());
        	 		}
        	 	},
        		template: '<button @click="accessRoot">访问根实例</button>'
        	})
			

        	app.mount('#app');
			
			
        </script>
	</body>
</html>